<template>
    <div class="allbuju">
        <Top/>
        <div class="toubu">
          <div class="demo-type">
          <el-avatar :size="90"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />

        </div>
     <br>
  <div class="xinxi">
    <div>iron</div>
  

    </div>
        <div>微信号：balabala &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; 📄</div>
    <div>+状态</div>
    <br/>
   
        </div>
      

        <div class="fuwu">
  <div class="demo-collapse">
    <el-collapse v-model="activeNames" @change="handleChange">
     <br> <el-collapse-item title="💲服务" name="1">
       
      </el-collapse-item><br>
      <el-collapse-item title="📦收藏" name="2">
        
      </el-collapse-item><br>
      <el-collapse-item title="💷卡包" name="3">
        
        
      </el-collapse-item><br>
     
   
      
      <el-collapse-item title="⚙设置"  name="4">
       
      </el-collapse-item>
    </el-collapse>
  </div>
          
        </div>
     
 <div id="footer">
            <div class="foot" @click="shequgonggongfuwu">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shouye"></use>
                        </svg>
                    </div>
                    <span>首页</span>
                </div>
				
                <div class="foot" @click="jiaoyukecheng">
                    <div class="topright"> 
                       <el-icon size="36" class="el-input__icon" ><Star style="width: 1em; height: 1em; margin-right: 8px" /></el-icon>
      
                    </div>
                    活动
                </div>
                <div class="foot" @click="gerenxinxi">
                    <div class="topright"> 
                   <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-31wode"></use>
                        </svg> </div>
                    <span>我的</span>
                </div>
        </div>
           
    </div>
</template>

<style lang="less" scoped>
.toubu { background: rgb(216, 239, 216);
  border: 1px solid rgb(206, 206, 206);
}
.fuwu { 
  border: 1px solid rgb(206, 206, 206);
  height: 620px;
 
}
.demo-type{
  width:100px;
  float: left;
}
.el-collapse {font: 1.5em sans-serif;
   width: 100%;
  height: 200px;
}
.xinxi{
  background: rgb(216, 239, 216);
  float: 300px;
  font: 1.5em sans-serif;
  
}
.el-collapse .el-collapse-item title{
  font: 1.5em sans-serif;
}
#footer{
    width: 100%;
    height: 60px;
    background: rgb(216, 239, 216);
    display: flex; 
    padding: 0px;              
    justify-content: space-between;
    align-items: center;
}
.foot{
    padding: 6px;
}
span{
    margin-left: 9px;
}
</style>

<script setup>
import  {Star,Setting} from '@element-plus/icons-vue'
</script>

<script>
import Top from '@/components/Top.vue'
import { ArrowDown, Document } from "@element-plus/icons-vue"
import { showToast } from 'vant';
export default {
  name: 'gerenxinxi',
  components: {
    Top,
  } , methods: {
			 
        jiaoyukecheng:function(){
            this.$router.replace('/jiaoyukecheng')
        },
		 shequgonggongfuwu:function(){
            this.$router.replace('/shequgonggongfuwu')
        },
		 gerenxinxi:function(){
            this.$router.replace('/gerenxinxi')
        },
}
}
</script>
